<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function doQuerySelector(){
            // document.querySelector(css选择器)，根据css选择器来查询，返回匹配的第一个DOM对象
            // var div=document.querySelector("div");
            // var div=document.querySelector(".mydiv");
            // var div=document.querySelector("#mydiv");
            // var div=document.querySelector("div span");
            var div=document.querySelector("div[name='xixi']");
            console.log(div);
        }

        function doQuerySelectorAll(){
            // document.querySelectorAll(css选择器)，根据css选择器来查询，所有符合的DOM对象的集合
            // var divs=document.querySelectorAll("div");//集合
            // var divs=document.querySelectorAll(".mydiv");
            var divs=document.querySelectorAll("#mydiv");
            console.log(divs);
        }
    </script>
</head>
<body>
    <input type="button" value="querySelector" onclick="doQuerySelector()">
    <input type="button" value="querySelectorAll" onclick="doQuerySelectorAll()">
    <div>div01</div>
    <div class="mydiv">div02
        <span>s01</span>
    </div>
    <span>ssss</span>
    <div class="mydiv">div03</div>
    <div id="mydiv">div04</div>
    <div name="xixi">last</div>
</body>
</html>